<template>
  <div class="item flex j-c">
    <div class="main"></div>
  </div>
</template>
<script>
import axios from "axios";
import * as echarts from "echarts";
export default {
  props: {},
  data() {
    return {
      country: [],
      countryValue: [],
      income: [],
    };
  },
  watch: {},
  created() {},
  async mounted() {
    let {
      data: { data },
    } = await axios.get("json/bar1.json");
    this.country = data.map((r) => r.name);
    this.countryValue = data.map((r) => r.value);
    this.country = this.country.reverse();
    this.countryValue = this.countryValue.reverse();
    this.init();
  },
  methods: {
    init() {
      let myEhcart = echarts.init(document.querySelector(".main"));
      // var myColor = ["#FFBFB3", "#FA8F7D", "#F35D4F", "#D42D3F", "#9AA6A6"];
      let option = {
        title: {
          text: "按国家收入水平分列的经证实的剂量",
          top: "3%",
          left: "center",
          textStyle: {
            fontSize: 26,
          },
        },
        // legend: {
        //   // orient: 'vertical',
        //   // top: 'middle',
        //   bottom: 10,
        //   left: "center",
        //   data: ["西凉", "益州", "兖州", "荆州", "幽州"],
        // },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: [0, 0.01],
          splitNumber: 9,
          data: ["高收入", "中上收入", "低中等收入", "低收入", "全球实体"],
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            fontSize: 15,
            fontWeight: 700,
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            fontWeight: 700,
            formatter(params) {
              console.log(params);
              if (params === 0) {
                return 0;
              } else {
                return params + "百万";
              }
            },
          },
          axisTick: {
            show: false,
          },
        },
        visualMap: {
          right: 26,
          top: 80,
          pieces: [
            {
              gt: 400,
              label: "高收入",
              color: "#F8BFAD",
            },
            {
              gte: 150,
              lte: 160,
              label: "中上收入",
              color: "#FA8F7D",
            },
            {
              gte: 75,
              lt: 80,
              label: "低中等收入",
              color: "#F35D4F",
            },
            {
              gt: 70,
              lt: 74,
              label: "低收入",
              color: "#D42D3F",
            },
            {
              gt: 110,
              lt: 115,
              label: "全球实体",
              color: "#9AA6A6",
            },
          ],
        },
        series: [
          {
            type: "bar",
            barWidth: "60%",
            data: [471.32775, 153.6210075, 73.2028, 77.02, 112.0],
            // itemStyle: {
            //   color: (params) => {
            //     return myColor[params.dataIndex];
            //   },
            // },
            label: {
              show: true,
              position: "top",
              formatter(par) {
                par.value = par.value.toFixed(2);
                return par.value + "百万";
              },
            },
          },
        ],
      };
      myEhcart.setOption(option);
      // 设置图表的自动适应
      window.addEventListener("resize", () => {
        myEhcart.resize();
      });
    },
  },
};
</script>
<style scoped lang='scss'>
.main {
  width: 1000px;
  height: 800px;
  margin: auto;
}
.item {
  height: 100%;
}
</style>
